<template>
  <div class="ResultDetails-Panel" v-loading="State.Loading">
    <div class="ResultDetails-Option">
      <div class="ResultDetails-Option-Model" v-for="(item,index) in State.ResultDetailsOption" :key="index" @click="SelectOption(index)" :class="State.SelectOptionIndex === index ? 'SeleteOptionActive' : 'Noactive'">
        <span>{{item.OptionName}}</span>
      </div>
      <div class="ResultDetails-Option-dropdown">
        <el-dropdown @command="handleCommand">
          <el-button type="primary">
            {{State.WorkOrderName}}<el-icon class="el-icon--right"><arrow-down/></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(its,index) in State.WorkOrderArr" :key="index" :command="index">{{its.Name}}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="ResultDetails-PersonalInformation" v-if="State.MathBoolean===0">
      <div class="ResultDetails-PersonalInformation-Model" v-for="(item,index) in State.MathPersonalInformation" :key="index">
        <span>{{item.Name}}</span>
        <span></span>
        <span>{{item.value}}</span>
      </div>
    </div>
    <div class="ResultDetails-PersonalInformation" v-else>
      <div class="ResultDetails-PersonalInformation-Model" v-for="(item,index) in State.PersonalInformation" :key="index">
        <span>{{item.Name}}</span>
        <span></span>
        <span>{{item.value}}</span>
      </div>
    </div>
    <!-- 综合结果分析 -->
    <div v-show="State.SelectOptionIndex===0">
      <!-- 雷达图面板 -->
      <div class="RadarChartPanel">
        <div id="RadarChart">
        </div>
      </div>
      <div class="ComprehensiveResultsPanel">
        <div>
          <span>综合结果分析</span>
        </div>
        <div>
          <span>详细得分点</span>
        </div>
        <div>
          <span>各项得分</span>
        </div>
        <div class="ResultAnalysisPanel">
          <div v-for="(its, indexs) in State.ResultAnalysisArr" :key="indexs" class="Resultl-list-item">
            <span class="Resultl-list-classification">{{its.name}}</span>
            <!-- <div class="xingxing-div" v-for="(item, itemid) in its.count" :key="itemid">
              <span class="xingxing-span">{{item.count}}</span>
            </div> -->
            <span class="Resultl-list-number">{{its.process}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 操作记录 -->
    <div v-show="State.SelectOptionIndex===1">
      <div class="OperationRecord">
        <el-scrollbar class="elscrollbar">
          <div class="OperationRecord-model" v-for="(item,index) in State.ResultlCompleted" :key="index">
            <div v-if="item.Completed==='true'">
              <span>已完成</span>
            </div>
            <div v-else class="OperationRecord-false">
              <span>未完成</span>
            </div>
            <div>
              <span>{{item.name}}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <!-- 详细操作记录 -->
    <div v-show="State.SelectOptionIndex===3">
      <div class="DetailedPperation">
        <el-scrollbar class="elscrollbar">
          <div class="FaultPanel-01">
            <div>{{FaultPanelInformation.Tip01}}</div>
            <div class="FaultPanel-01-model-panel">
                <div class="FaultPanel-01-Model" v-for="(item,index) in FaultPanelInformation.Appearence" :key="index"> 
                  <span>{{index+1}}:{{item.Error}}</span>
                </div>
            </div>
          </div>
          <div class="FaultPanel-02">
            <div>{{FaultPanelInformation.Tip02}}</div>
            <div class="FaultPanel-02-model-panel">
              <div class="FaultPanel-02-Model" v-for="(item,index) in FaultPanelInformation.Code" :key="index"> 
                <span>{{item.Error}}</span>
              </div>
            </div>
              
          </div>
          <div class="FaultPanel-03">
            <div>{{FaultPanelInformation.Tip03}}</div>
            <div>
              <div class="FaultPanel-03-item"><span>项目</span><span>数值</span><span>单位</span><span>判断结果</span></div>
              <div class="FaultPanel-03-model-panel">
                <div v-for="(item,index) in FaultPanelInformation.DataStream" :key="index" class="FaultPanel-03-model">
                  <span>{{item.name}}</span><span>{{item.value}}</span><span>{{item.unit}}</span>
                  <el-radio-group v-model="item.judge">
                    <el-radio :label="0" disabled >正常</el-radio>
                    <el-radio :label="1" disabled >不正常</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="FaultPanel-04">
            <div>{{FaultPanelInformation.Tip04}}</div>
            <div class="FaultPanel-04-group">
              <el-radio-group v-model="FaultPanelInformation.KeyPair">
                <el-radio :label="0" disabled >无DTC</el-radio>
                <el-radio :label="1" disabled >有DTC</el-radio>
              </el-radio-group>
              <div class="FaultPanel-04-group-DTC">{{FaultPanelInformation.KeyPairValue}}</div>
            </div>
          </div>
          <div class="FaultPanel-05">
            <div>{{FaultPanelInformation.Tip05}}</div>
            <div class="FaultPanel-05-model-panel">
               <div class="FaultPanel-05-model" v-for="(item,index) in FaultPanelInformation.PointRange" :key="index"> 
                  <span>{{index+1}}:{{item.PointRangeError}}</span>
                </div>
            </div>
          </div>
          <div class="FaultPanel-06">
            <div>{{FaultPanelInformation.Tip06}}</div>
            <div>
              <div class="FaultPanel-06-item"><span>部件/线路范围</span><span>判断结果</span></div>
                <div class="FaultPanel-06-model-panel">
                  <div v-for="(item,index) in FaultPanelInformation.DataStreamTwo" :key="index" class="FaultPanel-06-model">
                    <span>{{item.Key}}</span>
                    <el-radio-group v-model="item.Value">
                      <el-radio :label="0" disabled >正常</el-radio>
                      <el-radio :label="1" disabled >不正常</el-radio>
                    </el-radio-group>
                  </div>
                </div>
            </div>
          </div>
          <div class="FaultPanel-07">
            <div>{{FaultPanelInformation.Tip07}}</div>
            <div class="FaultPanel-07-model-panel">
                <div class="FaultPanel-07-Model" v-for="(item,index) in FaultPanelInformation.FaultPointInfo" :key="index"> 
                  <span>{{index+1}}:{{item.Error}}</span>
                </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <!-- 故障修复记录 -->
    <div v-show="State.SelectOptionIndex===2">
      <div class="FaultRecordPanel">
        <el-scrollbar class="elscrollbar">
          <div class="FaultRecordPanel-model" v-for="(item,index) in State.Points" :key="index">
            <div v-if="item.Completed==='true'">
              <span>已完成</span>
            </div>
            <div v-else class="FaultRecordPanel-false">
              <span>未完成</span>
            </div>
            <div>
              <span>{{item.name}}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
let echarts = require("echarts");
import { defineComponent, reactive, ref,onMounted,toRef, toRefs } from "vue";
import bus from "@/bus.js";
import { ArrowDown } from '@element-plus/icons'
export default defineComponent({
  name: "ResultDetails",
  components: {
    ArrowDown
  },
  props: {
    ResultDetails: {
      type: Object,
      default: () => {},
    },
    MatchBoolean: {
      type: Number,
      default: 1,
    },
  },
  setup(props,ctx) {
    let RadarChart = ref('')
    let FaultPanelInformation=reactive({
      Tip01:"1 : 故障现象确认",
      Appearence:"",
      Tip02:"2 : 模块故障状态及故障码检查",
      Code:"",
      Tip03:"3 : 正确读取数据",
      DataStream:[
        {name:"",shuzhi:"",danwei:"",radio:""},
      ],
      Tip04:"4 : 清除故障并再次读取",
      KeyPair:-1,
      KeyPairValue:"",
      Tip05:"5 : 确定故障范围",
      PointRange:"",
      Tip06:"6 : 基本检查",
      Tip1:1,
      Tip2:1,
      Tip06:"6 : 部件/电路测试",
      DataStreamTwo:[
        {Key:"",Value:""},
        {Key:"",Value:""},
        {Key:"",Value:""},
      ],
      Tip07:"7 : 故障确认和排除",
      FaultPointInfo:''
    })
    let State = reactive(
      {
        //工单名称
        WorkOrderName:'工单记录',
        Loading:true,
        //成绩选项
        ResultDetailsOption:[
          {
            OptionName:"综合结果分析"
          },
          {
            OptionName:"操作记录"
          },
          {
            OptionName:"故障修复记录"
          }
        ],
        //工单数组
        WorkOrderArr:[],
        //工单所有数据
        orders:'',
        MathBoolean:false,
        //选项
        SelectOptionIndex:0,
        //个人信息
        MathPersonalInformation:[
          {
            Name:"任务",
            value:sessionStorage.getItem("TaskTitle")
          },
          {
            Name:"姓名",
            value:sessionStorage.getItem("StudentName")
          },
          {
            Name:"用时",
            value:FNumToDate(props.ResultDetails.time)
          },
          {
            Name:"总得分",
            value:props.ResultDetails.score
          }
        ],
        PersonalInformation:[
          {
            Name:"任务",
            value:props.ResultDetails.trainingTaskName
          },
          {
            Name:"姓名",
            value:props.ResultDetails.userName 
          },
          {
            Name:"用时",
            value:FNumToDate(props.ResultDetails.time)
          },
          {
            Name:"总得分",
            value:props.ResultDetails.score
          }
        ],
        //综合信息
        ResultAnalysisArr:[],
        //任务完成信息
        ResultlCompleted:'',
        Points:'',
        RadarChartOption : {
          tooltip: {
            trigger: 'axis'
          },
          radar: [
            {
                indicator: [
                    {text: '工艺流程', max: 100},
                    {text: '操作规范', max: 100},
                    {text: '工具使用', max: 100},
                    {text: '安全意识', max: 100},
                    {text: '技能熟练', max: 100}
                ],
                center: ['47.5%', '53%'],
                radius: 160,
                //改变成圆形
                shape: 'circle',
            },
          ],
          series: [
            {
              type: 'radar',
              tooltip: {
                  trigger: 'item'
              },
              areaStyle: {},
              data: [
                  {
                      value: [20, 35, 55, 10,21],
                      name: '成绩',
                  }
              ],
              itemStyle: {     //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
                color: '#196FF7',
                borderColor: '#196FF7',
              },
            },
          ]
        },
      }
    )
    //选择工单列表执行的操作(总工单数据处理)
    function handleCommand(index){
      if(State.WorkOrderArr[0].Name==="暂无工单"){
        return
      }else{
        State.WorkOrderName = State.WorkOrderArr[index].Name
        State.SelectOptionIndex=3
        ProcessWorkorderSeparately(State.orders,index)
      }
    }
    //用于判断是否是比赛进入还是普通进入查询成绩
    State.MathBoolean = props.MatchBoolean
    //处理时间函数
    function FNumToDate(seconds) {
		  let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
			seconds -= 3600 * hour;
			let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
			seconds -= 60 * min;
			let sec = seconds >= 10 ? seconds : '0' + seconds;
			return hour + ':' + min + ':' + sec;
	  }
    //选择哪个模块
    function SelectOption(index){
      State.SelectOptionIndex=index
    }
    //处理数值
    function ProcessingData(datas){
      let keys = Object.keys(datas)
      let values = Object.values(datas)
      let data = keys.map((key, index) => key.concat(`,${values[index]}`))
      let RadarValueArr=[]
      for(let i=0;i<data.length;i++){
        let C = data[i].split(",")
        let D ={
          name: C[0],
          Completed:C[1],
        }
        RadarValueArr.push(D)
      }
      return RadarValueArr
    }
    //单独处理工单的数据
    function ProcessWorkorderSeparately(orders,WorkorderIndex){
      if(orders.Appraises.length!==0){
        if(Object.keys(orders.Appraises[WorkorderIndex].DataStream).length!==0){
          let DataStream =orders.Appraises[WorkorderIndex].DataStream
          let DataStreamkeys = Object.keys(DataStream)
          let DataStreamvalues = Object.values(DataStream)
          let data = DataStreamkeys.map((key, index) => key.concat(`,${DataStreamvalues[index]}`))
          let DataStreamArr=[]
          for(let i=0;i<data.length;i++){
            let C = data[i].split(",")
            let D ={
              name: C[0],
              value:C[1],
              unit:C[2],
              temporary:C[3],
              judge:parseInt(C[4]),
            }
            DataStreamArr.push(D)
          }
          FaultPanelInformation.DataStream = DataStreamArr
        }else{
          FaultPanelInformation.DataStream=[{name:"",shuzhi:"",danwei:"",radio:""}]
        }
          
        if(orders.Appraises[WorkorderIndex].Appearence){
          if(Object.keys(orders.Appraises[WorkorderIndex].Appearence).length!==0){
            let AppearenceInfo = orders.Appraises[WorkorderIndex].Appearence.split(",")
            let AppearenceInfoArr=[]
            for(let i=0;i<AppearenceInfo.length;i++){
              let A = {
                Error:AppearenceInfo[i]
              }
              AppearenceInfoArr.push(A)
            }
            FaultPanelInformation.Appearence=AppearenceInfoArr
          }
        }else{
          FaultPanelInformation.Appearence=''
        }
          
        if(orders.Appraises[WorkorderIndex].Code){
          if(Object.keys(orders.Appraises[WorkorderIndex].Code).length!==0){
            let CodeInfo = orders.Appraises[WorkorderIndex].Code.split(",")
            let CodeInfoArr=[]
            for(let i=0;i<CodeInfo.length;i++){
              let A = {
                Error:CodeInfo[i]
              }
              CodeInfoArr.push(A)
            }
            FaultPanelInformation.Code=CodeInfoArr
          }
        }else{
          FaultPanelInformation.Code=''
        }
          

        if(orders.Appraises[WorkorderIndex].PointRange){
          if(Object.keys(orders.Appraises[WorkorderIndex].PointRange).length!==0){
            let PointRangeInfo = orders.Appraises[WorkorderIndex].PointRange.split(",")
            let PointRangeInfoArr=[]
            for(let i=0;i<PointRangeInfo.length;i++){
              let A = {
                PointRangeError:PointRangeInfo[i]
              }
              PointRangeInfoArr.push(A)
            }
            FaultPanelInformation.PointRange=PointRangeInfoArr
          }
        }else{
          FaultPanelInformation.PointRange=''
        }
        FaultPanelInformation.KeyPairValue= orders.Appraises[WorkorderIndex].Recode.Value
        FaultPanelInformation.KeyPair = orders.Appraises[WorkorderIndex].Recode.Key
        FaultPanelInformation.DataStreamTwo = orders.Appraises[WorkorderIndex].PointCheck
        if(orders.Appraises[WorkorderIndex].FaultPointInfo){
          if(Object.keys(orders.Appraises[WorkorderIndex].FaultPointInfo).length!==0){
            let FaultPointInfo = orders.Appraises[WorkorderIndex].FaultPointInfo.split(",")
            let FaultPointInfoArr=[]
            for(let i=0;i<FaultPointInfo.length;i++){
              let A = {
                Error:FaultPointInfo[i]
              }
              FaultPointInfoArr.push(A)
            }
            FaultPanelInformation.FaultPointInfo=FaultPointInfoArr
          }
        }else{
          FaultPanelInformation.FaultPointInfo=''
        }
      }
    }
    //处理传过来的数值
    function HandleResult(WorkorderIndex){
      let Result = props.ResultDetails
      console.log(Result);
      if (Result.orders == '') {
        Result.orders = null
      }
      let orders = JSON.parse(Result.orders)
      console.log('++++++++++++++++++++++',orders);
      State.orders = orders
      if(orders){
        let keys = Object.keys(orders.ComprehensiveResultsAnalysis.RadarValue)
        let values = Object.values(orders.ComprehensiveResultsAnalysis.RadarValue)
        let data = keys.map((key, index) => key.concat(`,${values[index]}`))
        let RadarValueArr=[]
        for(let i=0;i<data.length;i++){
          let C = data[i].split(",")
          let D ={
            name: C[0],
            process:C[1],
          }
          RadarValueArr.push(D)
        }
        State.ResultAnalysisArr = RadarValueArr
        if(orders.Appraises.length===0 || orders.Appraises===''){
          State.WorkOrderArr.push({
          Name:"暂无工单"
          })
        }else{
          for(let i=0;i<orders.Appraises.length;i++){
            State.WorkOrderArr.push({
              Name:orders.Appraises[i].Name
            })
          }
        }
        let arr = []
        let indicator =[]
        for(let i=0;i<RadarValueArr.length;i++){   
          arr.push(RadarValueArr[i].process)
        }
        for(let i=0;i<State.ResultAnalysisArr.length;i++){   
          arr.push(State.ResultAnalysisArr[i].process)
          indicator.push(
            {text:State.ResultAnalysisArr[i].name,max:100}
          )
        }
        RadarChart.value.setOption({
          radar: [
          {
            indicator: indicator
          },
          ],
          series: [
            {
              data:[
                {
                  value:arr,
                  name:"成绩",
                }
              ]
            }
          ]
        })
        //操作记录
        State.ResultlCompleted =ProcessingData(orders.OperationSteps)
        //故障修复记录
        State.Points=ProcessingData(orders.ComprehensiveResultsAnalysis.Points)
      }else{
        //显示暂无工单
        State.WorkOrderArr.push({
          Name:"暂无工单"
        })
        //没有成绩的时候显示
        State.ResultAnalysisArr=[
          {name:'工艺流程',process:0},
          {name:'操作规范',process:0},
          {name:'工具使用',process:0},
          {name:'安全意识',process:0},
          {name:'技能熟练',process:0},
        ]
        RadarChart.value.setOption({
          radar: [
          {
            indicator:[
              {text: '工艺流程', max: 100},
              {text: '操作规范', max: 100},
              {text: '工具使用', max: 100},
              {text: '安全意识', max: 100},
              {text: '技能熟练', max: 100}
            ]
          },
          ],
          series: [
            {
              data:[
                {
                  value: [0, 0, 0, 0 , 0],
                  name: '成绩',
                }
              ]
            }
          ]
        })
      }
    }
    onMounted(() => {
      console.log('jinlai为4的详情页了么');
      
      //获取雷达图的Demo
      RadarChart.value = echarts.init(document.getElementById("RadarChart"));
      RadarChart.value.setOption(State.RadarChartOption);
      HandleResult(0)
      State.Loading = false
    });
    return {
      State,
      RadarChart,
      SelectOption,
      FaultPanelInformation,
      handleCommand
    };
  },
});
</script>
<style scoped lang="less">
.ResultDetails-Panel{
  margin-left: 15px;
  width: 98%;
  height: 90%;
  // background:blue;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
.ResultDetails-Option{
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ResultDetails-Option-Model{
  width: 160px;
  height: 40px;
  background: rgba(129, 133, 156, 0.2);
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ResultDetails-Option>div:nth-child(1){
  border-radius: 20px 0px 0px 20px;
}
.ResultDetails-Option>div:nth-last-child(1){
  border-radius: 0px 20px 20px 0px;
}
.SeleteOptionActive{
  background: linear-gradient(-90deg, #0974d8, #3d8ef1, #7c7ff8);
  color: #FFFFFF;
}
.Noactive{
  background: rgba(129, 133, 156, 0.1);
}
.ResultDetails-PersonalInformation{
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px 1px 0px 0px rgba(129, 133, 156, 0.2);
}
.ResultDetails-PersonalInformation-Model{
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ResultDetails-PersonalInformation>div:nth-child(1){
  width: 600px;
}
.ResultDetails-PersonalInformation-Model>span:nth-child(1){
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.ResultDetails-PersonalInformation-Model>span:nth-child(2){
  width: 2px;
  height: 16px;
  margin-left: 20px;
  background: #218CDE;
}
.ResultDetails-PersonalInformation-Model>span:nth-child(3){
  margin-left: 20px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.RadarChartPanel{
  position: absolute;
  margin-left: 100px;
  margin-top: 50px;
  width: 35%;
  height: 65%;
}
#RadarChart{
  width: 100%;
  height: 100%;
}
.ComprehensiveResultsPanel{
  position: absolute;
  right: 150px;
  margin-top: 70px;
  width: 35%;
  height: 65%;
}
.ComprehensiveResultsPanel>div:nth-child(1){
  position: absolute;
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  background: linear-gradient(0deg, #807DE1 0%, #218CDE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ComprehensiveResultsPanel>div:nth-child(2){
  margin-top: 60px;
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #81859C;
}
.ComprehensiveResultsPanel>div:nth-child(3){
  margin-top: 20px;
  width: 100%;
  min-height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items:center;
}
.ComprehensiveResultsPanel>div:nth-child(3) span{
  width: 90px;
  min-height:30px;
  display: flex;
  justify-content: center;
  align-items:center;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #FFFFFF;
  background: linear-gradient(90deg, #807DE1, #218CDE);
}
.ComprehensiveResultsPanel>div:nth-child(4){
  margin-top: 10px;
  width: 100%;
  height: 70%;
}
.Resultl-list-item{
  width: 600px;
  height: 60px;
  background: rgba(54, 56, 75, 0);
  box-shadow: 0px -1px 0px 0px rgba(54, 56, 75, 0.2);
}
.Resultl-list-classification{
  position: absolute;
  width: 80px;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #81859C;
}
.Resultl-list-number{
  position: absolute;
  width: 98%;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #1B1B1D;
}
.ResultAnalysisPanel>div:nth-last-child(1){
  border-bottom:1px solid  rgba(54, 56, 75, 0.2);
}

//操作记录
.OperationRecord{
  position: absolute;
  width: 98%;
  height: 70%;
}
.OperationRecord .elscrollbar{
  position: absolute;
  height: 100%;
  width: 100%;
}
.OperationRecord-model{
  margin-left: 20px;
  width: 98%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom:1px solid  rgba(54, 56, 75, 0.2);
}
.OperationRecord .el-scrollbar__view>div:nth-child(1){
  margin-top: 0px;
}
.OperationRecord-model>div:nth-child(1){
  width: 5%;
  height: 30px;
  background: rgba(73, 141, 64, 0);
  border: 1px solid #498D40;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.OperationRecord-false{
  border: 1px solid #BF3434 !important;
}
.OperationRecord-model>div:nth-child(2){
  margin-left: 10px;
  font-size: 22px;
}

//故障记录
.FaultRecordPanel{
  position: absolute;
  width: 98%;
  height: 70%;
}
.FaultRecordPanel .elscrollbar{
  position: absolute;
  height: 100%;
  width: 100%;
}
.FaultRecordPanel-model{
  margin-left: 20px;
  width: 98%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom:1px solid  rgba(54, 56, 75, 0.2);
}
.FaultRecordPanel-model>div:nth-child(1){
  width: 5%;
  height: 30px;
  background: rgba(73, 141, 64, 0);
  border: 1px solid #498D40;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultRecordPanel-false{
  border: 1px solid #BF3434 !important;
}
.FaultRecordPanel-model>div:nth-child(2){
  margin-left: 10px;
  font-size: 22px;
}
//操作详细记录
.DetailedPperation{
  position: absolute;
  width: 98%;
  height: 72%;
}
.DetailedPperation .elscrollbar{
  position: absolute;
  height: 100%;
  width: 100%;
}
.FaultPanel-01>div:nth-child(1),
.FaultPanel-02>div:nth-child(1),
.FaultPanel-03>div:nth-child(1),
.FaultPanel-04>div:nth-child(1),
.FaultPanel-05>div:nth-child(1),
.FaultPanel-06>div:nth-child(1),
.FaultPanel-07>div:nth-child(1){
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 20px;
}
.FaultPanel-01-model-panel{
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultPanel-01-Model{
  width: 95%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items:center;
  justify-content: flex-start;
  border-radius: 10px;
  font-size: 16px;
}
.FaultPanel-01-Model span{
  margin-left: 10px;
}
.FaultPanel-01-model-panel>div:nth-last-child(1){
  margin-bottom: 10px;
}
.FaultPanel-02-model-panel{
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultPanel-02-Model{
  width: 30%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items:center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
}
.FaultPanel-02-Model span{
  margin-left: 10px;
}
// .FaultPanel-02>div:nth-child(2){
//   width: 99%;
//   min-height: 100px;
//   font-size: 18px;
//   text-indent: 20px;
//   border-radius: 15px;
//   background: rgba(129, 133, 156, 0.1);
//   display: flex;
//   align-items: flex-start;
//   justify-content: flex-start;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   color: #81859C;
// }
.FaultPanel-03{
  position: relative;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultPanel-03>div:nth-child(2){
  width: 60%;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
}
.FaultPanel-03-item{
  position: absolute;
  padding-top: 10px;
  width: 100%;
  height: 30px;
}
.FaultPanel-03-item span{
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.FaultPanel-03-item>span:nth-child(1){
  left: 0px;
}
.FaultPanel-03-item>span:nth-child(2){
  position: absolute;
  left: 200px;
}
.FaultPanel-03-item>span:nth-child(3){
  position: absolute;
  left: 400px;
}
.FaultPanel-03-item>span:nth-child(4){
  position: absolute;
  left: 700px;
}
.FaultPanel-03-model-panel{
  position: relative;
  padding-top: 35px;
}
.FaultPanel-03-model{
  margin-top: 20px;
}
.FaultPanel-03-model>span:nth-child(1){
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
}
.FaultPanel-03-model>span:nth-child(2){
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 200px;
}
.FaultPanel-03-model>span:nth-child(3){
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 400px;
}
.FaultPanel-03-model .el-radio-group{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  left: 700px;
}
.FaultPanel-03-model:nth-last-child(1){
  padding-bottom: 20px;
}

.FaultPanel-04{
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultPanel-04 .el-radio-group{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  width: 98%;
  height: 60px;
  padding-left: 20px;
}
.FaultPanel-04 .FaultPanel-04-group{
  position: relative;
}
.FaultPanel-04 .FaultPanel-04-group-DTC{
  position: absolute;
  width: 85%;
  height: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  left: 200px;
  top: 12px;
  border-bottom: 1px solid #81859C;
}
.FaultPanel-05{
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultPanel-05-model-panel{
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.FaultPanel-05-model{
  width: 95%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items:center;
  justify-content: flex-start;
  border-radius: 10px;
  font-size: 16px;
}
.FaultPanel-05-model-panel>div:nth-last-child(1){
  margin-bottom: 10px;
}
.FaultPanel-05-model-panel span{
  margin-left: 10px;
}
// .FaultPanel-05-model-panel .elscrollbar {
//   position: absolute;
//   height: 100%;
//   width: 100%;
// }
// .FaultPanel-05-model-panel .el-scrollbar__view {
//   display: flex;
//   flex-wrap: wrap;
// }

.FaultPanel-06-item{
  position: absolute;
  padding-top: 10px;
  width: 30%;
  height: 30px;
}
.FaultPanel-06-item span{
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.FaultPanel-06-item>span:nth-child(1){
  left: 0px;
}
.FaultPanel-06-item>span:nth-child(2){
  left: 300px;
}
.FaultPanel-06 > div:nth-child(2) {
  width: 30%;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
}
.FaultPanel-06-model-panel{
  position: relative;
  padding-top: 35px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultPanel-06-model{
  margin-top: 20px;
}
.FaultPanel-06-model>span:nth-child(1){
  position: absolute;
  font-size: 16px;
  width: 300px;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 20px;
  border-bottom: 1px solid #81859C;
  cursor: pointer;
}
.FaultPanel-06-model>span:nth-child(2){
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 200px;
}
.FaultPanel-06-model .el-radio-group{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  left: 300px;
}
.FaultPanel-06-model:nth-last-child(1){
  padding-bottom: 20px;
}
.FaultPanel-07{
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}
.FaultPanel-07-model-panel{
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
// .FaultPanel .FaultPanel-07-model-panel .infinite-list {
//   position: absolute;
//   height: 100%;
//   width: 100%;
// }
// .FaultPanel .FaultPanel-07-model-panel .el-scrollbar__view {
//   display: flex;
//   flex-wrap: wrap;
// }
.FaultPanel-07-Model{
  width: 95%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items:center;
  justify-content: flex-start;
  border-radius: 10px;
  font-size: 16px;
}
.FaultPanel-07-Model span{
  margin-left: 10px;
}
.FaultPanel-07-model-panel>div:nth-last-child(1){
  margin-bottom: 10px;
}
// .FaultPanel-07 .FaultPanel-07-model-panel .el-scrollbar__wrap {
//   overflow-x: hidden;
// }
.ResultDetails-Option-dropdown .el-button{
  width: 220px;
  height: 40px;
  background: rgba(129, 133, 156,0.1);
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  border: none;
  border-radius: 0px 20px 20px 0px;
  color: black;
}
</style>
